<template>
	<view class="login">
		<!--顶部返回按钮-->
		<text class="back-btn iconfont iconzuo" @tap="navBack"></text>
		<view class="login-top bg-active">
			<view class="desc">
				<view class="title">Hi~</view>
				<text>欢迎使用{{ appName }}</text>
			</view>
			<image class="login-pic" src="/static/login-pic.png"></image>
		</view>
		<view class="login-type-content">
			<view class="main">
				<view class="nav-bar">
					<block v-for="(item, index) in typeList" :key="index">
						<view class="nav-bar-item"
							:class="tabCurrentIndex === index ? 'nav-bar-item-active text-active' : ''"
							@tap="tabClick(index)"> {{ item.text }} </view>
					</block>
				</view>
				<block v-if="tabCurrentIndex === 0">
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont icondianhua"></text>
							<input class="login-type-input" type="number" v-model="loginForm.phone"
								placeholder="请输入手机号码" maxlength="11" />
						</view>
						<!-- <view class="input-item" v-if="loginByPass">
							<text class="iconfont iconmimaffffffpx"></text>
							<input class="login-type-input" type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" />
						</view> -->
						<view class="input-item" v-if="loginByPass">
							<view class="flex">
								<text class="iconfont iconmimaffffffpx"></text>
								<input class="login-type-input" placeholder="请输入密码" v-model="loginForm.password"
									:password="!showPassword" />
								<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionfill']"
									@click="changePwdView"></text>
							</view>
						</view>
						<view class="input-item">
							<view style="display: flex;">
								<text class="iconfont icontupian"></text>
								<input class="login-type-input" v-model="loginForm.catchaCode" placeholder="请输入图形码"
									maxlength="4" />
								<image style="width: 136px;height: 43px;" :src="captchaImg" @tap="getCaptcha(0)">
								</image>
							</view>
						</view>
						<view class="input-item input-item-sms-code" v-if="!loginByPass">
							<text class="iconfont iconyanzhengma"></text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input type="number" class="login-type-input" v-model="loginForm.smsCode"
										placeholder="请输入短信验证码" maxlength="6" />
								</view>
								<button class="sms-code-btn" size="mini" :disabled="getCodeBtnDisable"
									@click="GetmobileCode(0)">
									<text>{{codeBtnWord}}</text>
								</button>
							</view>
						</view>
					</view>
					<view class="login-type-tips">
						<u-checkbox-group @change="change">
							<u-checkbox :checked="value" shape="circle" label="记住密码"></u-checkbox>
						</u-checkbox-group>
						<view @tap="showLoginBySmsCode" class="forget-section" style="font-size: 32rpx;color: #3a48a7;">
							{{ loginByPass ? '验证码登录' : '密码登录' }}
						</view>
						<!-- <text @tap="navTo('/pages/public/password')">忘记密码？</text> -->
					</view>
					<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading"
						@tap="login">登录</button>
				</block>
				<block v-if="tabCurrentIndex === 1">
					<view class="login-type-form">
						<view class="input-item">
							<text class="iconfont icondianhua"></text>
							<input class="login-type-input" type="number" name="mobile" v-model="regForm.account"
								placeholder="请输入手机号码" maxlength="11" />
						</view>
						<view class="input-item">
							<text class="iconfont iconmimaffffffpx"></text>
							<input class="login-type-input" type="password" v-model="regForm.password"
								placeholder="请输入密码" maxlength="20" />
						</view>
						<view class="input-item">
							<view style="display: flex;">
								<text class="iconfont icontupian"></text>
								<input class="login-type-input" type="text" v-model="regForm.imgCode"
									placeholder="请输入图形码" maxlength="4" />
								<image style="width: 136px;height: 43px;" :src="captchaImg" @tap="getCaptcha(1)">
								</image>
							</view>
						</view>
						<view class="input-item input-item-sms-code">
							<text class="iconfont iconyanzhengma"></text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input type="number" class="login-type-input" v-model="regForm.smsCode"
										placeholder="请输入短信验证码" maxlength="6" />
								</view>
								<button class="sms-code-btn" size="mini" :disabled="getCodeBtnDisable"
									@click="GetmobileCode(1)">
									<text>{{codeBtnWord}}</text>
								</button>
							</view>
						</view>
						<view class="input-item">
							<text class="iconfont iconyanzhengma1"></text>
							<block v-if="regForm.inviteCode">
								<input class="login-type-input" type="text" :disabled="true"
									v-model="regForm.inviteCode" placeholder="请输入邀请码" maxlength="20" />
							</block>
							<input v-else class="login-type-input" type="text" v-model="regForm.inviteCode"
								placeholder="请输入邀请码" maxlength="20" />
						</view>
					</view>
					<button class="confirm-btn bg-active" :disabled="btnLoading" :loading="btnLoading"
						@tap="register">注册</button>
				</block>
			</view>
		</view>
		<view class="login-type-bottom text-active"> {{ appName }} 版权所有 </view>
	</view>
</template>
<script>
	import requestConfig from "@/config/request.js";
	import WxUserInfoModal from "@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue";
	import logVue from "../main/chat/log.vue";

	export default {
		data() {
			return {
				captchaImg: undefined,
				showPassword: false,
				loginForm: {
					phone: undefined,
					catchaCode: undefined,
					password: undefined,
					smsCode: undefined,
					uuid: undefined,
					loginType: this.isMobile() ? 'app' : 'web'
				},
				getCodeBtnDisable: false,
				regForm: {
					account: undefined,
					password: undefined,
					imgCode: undefined,
					smsCode: undefined,
					inviteCode: undefined,
					uuid: undefined,
				},
				codeBtnWord: "获取验证码", // 获取验证码按钮文字
				waitTime: 30, // 获取验证码按钮失效时间
				btnLoading: false,
				reqBody: {},
				codeSeconds: 0, // 验证码发送时间间隔
				loginByPass: true,
				smsCodeBtnDisabled: true,
				userInfo: null,
				appName: '勤学好问',
				tabCurrentIndex: 0,
				typeList: [{
					text: '登录'
				}, {
					text: '注册'
				}],
				value: false,
			};
		},
		onLoad(options) {
			this.tabCurrentIndex = 0;
			this.getCaptcha(this.tabCurrentIndex); //默认刷新登录验证码
			let invcode = uni.getStorageSync("invitation");
			if (invcode) {
				this.regForm.inviteCode = invcode;
			}
			if (uni.getStorageSync("account")) {
				this.loginForm.phone = uni.getStorageSync("account").userName
				this.loginForm.password = uni.getStorageSync("account").password
				this.value = true
			}
		},
		methods: {
			change() {
				this.value = !this.value

			},
			changePwdView() {
				this.showPassword = !this.showPassword;
			},
			async login(e) {
				if (!this.validatePhoneNumber(this.loginForm.phone)) {
					uni.showToast({
						title: "手机号输入不正确",
						icon: "none"
					});
					return;
				}
				uni.showLoading({
					title: '登录中～',
					mask: true
				})
				const {
					data
				} = await uni.$u.http.post("/user/login", this.loginForm);
				let rows = data;
				uni.hideLoading()
				if (rows.code == 200) {
					this.userInfo = rows.data;
					uni.setStorageSync("appToken", rows.data.token);
					uni.setStorageSync("userInfo", rows.data.user);
					uni.showToast({
						title: "登录成功",
						duration: 2500,
						icon: "success",
						success: () => {
							let tt = setTimeout(() => {
								uni.switchTab({
									url: "/"
								});
							}, 1000);
						}
					});
					//记住密码操作
					if (this.value) {
						uni.setStorageSync("account", {
							userName: this.loginForm.phone,
							password: this.loginForm.password
						});
					} else {
						uni.removeStorageSync('account')
					}
				} else {
					uni.showToast({
						title: rows.msg,
						icon: "none"
					});
					this.getCaptcha(this.tabCurrentIndex)
				}
			},
			async register() { // 注册
				if (!this.validatePhoneNumber(this.regForm.account)) {
					uni.showToast({
						title: "手机号输入不正确",
						icon: "none"
					});
					return;
				}
				uni.showLoading({
					title: '注册中～',
					mask: true
				})
				const {
					data
				} = await uni.$u.http.post("/user/reg", this.regForm);
				uni.hideLoading()
				if (data.code == 200) {
					this.userInfo = data.data;
					uni.setStorageSync("appToken", data.data.token);
					uni.setStorageSync("userInfo", data.data.user);
					uni.showToast({
						title: "注册成功",
						duration: 2500,
						icon: "success",
						success: () => {
							let tt = setTimeout(() => {
								uni.switchTab({
									url: "/"
								});
							}, 1000);
						}
					});
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					});
				}
			},
			async getCaptcha(type) { //获取图形验证码（0登录，1注册）
				this.captchaImg = ''
				const {
					data
				} = await uni.$u.http.get("/captchaImage");
				if (data.status === 200) {
					if (type) {
						this.regForm.uuid = data.data.uuid;
					} else {
						this.loginForm.uuid = data.data.uuid;
					}
					this.captchaImg = "data:image/png;base64," + data.data.img
				}
			},
			async GetmobileCode(e) { // 发送验证码并进入倒计时（0登录，1注册）
				if (e) {
					if (!this.regForm.account || !this.regForm.imgCode) {
						uni.showToast({
							title: "手机号 和 图形验证码不能为空",
							icon: "none"
						});
						return;
					}
				} else {
					if (!this.loginForm.phone || !this.loginForm.catchaCode) {
						uni.showToast({
							title: "手机号 和 图形验证码不能为空",
							icon: "none"
						});
						return;
					}
				}
				let phone = e ? this.regForm.account : this.loginForm.phone;
				let uuid = e ? this.regForm.uuid : this.loginForm.uuid;
				let verify = e ? this.regForm.imgCode : this.loginForm.catchaCode;
				if (!this.validatePhoneNumber(phone)) {
					uni.showToast({
						title: "手机号输入不正确",
						icon: "none"
					});
					return;
				}
				const {
					data
				} = await uni.$u.http.post("/user/register/verify", {
					phone: phone,
					uuid: uuid,
					type: e,
					verificationCode: verify
				});
				if (data.code == 200) {
					let that = this;
					that.waitTime--;
					that.getCodeBtnDisable = true;
					this.codeBtnWord = `${this.waitTime}s后重新获取`;
					let timer = setInterval(function() {
						if (that.waitTime > 1) {
							that.waitTime--;
							that.codeBtnWord = `${that.waitTime}s后重新获取`;
						} else {
							clearInterval(timer);
							that.codeBtnWord = "获取验证码";
							that.getCodeBtnDisable = false;
							that.waitTime = 31;
						}
					}, 1000);
				} else {
					uni.showToast({
						title: data.msg || '操作失败',
						icon: "none"
					});
				}
			},
			validatePhoneNumber(str) { //手机号码验证
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				return reg.test(str);
			},
			showLoginBySmsCode() { // 切换登录方式
				this.loginByPass = !this.loginByPass;
			},
			navBack() { // 返回上一页
				uni.navigateBack();
			},
			navTo(url) { // 统一跳转路由
				uni.navigateTo({
					url
				});
			},
			// 提交表单
			async toLogin() {
				uni.showToast({
					title: '点击了登录按钮'
				});
			},
			// 切换登录/注册
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.getCaptcha(this.tabCurrentIndex); //默认刷新登录验证码
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: #fff;
	}

	.login {
		width: 100%;
		position: relative;

		.bg-active {
			background-color: $base-color;
			color: #fff;
		}

		.text-active,
		.iconfont {
			color: $base-color;
		}

		.back-btn {
			position: absolute;
			left: 40rpx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40rpx;
			font-size: 48rpx;
			color: #fff;
		}

		.login-top {
			height: 460rpx;
			position: relative;

			.desc {
				color: #fff;
				position: absolute;
				top: 200rpx;
				left: 40rpx;
				font-size: 48rpx;

				.title {
					font-size: 48rpx;
				}
			}

			.login-pic {
				position: absolute;
				width: 220rpx;
				height: 270rpx;
				right: 30rpx;
				top: 114rpx;
			}
		}

		.login-type-content {
			position: relative;
			top: -72rpx;
			display: flex;
			justify-content: center;

			.main {
				width: 90%;
				background-color: #fff;
				border-radius: 10px 10px 0 0;

				.nav-bar {
					display: flex;
					height: 100rpx;
					justify-content: center;
					align-items: center;
					position: relative;
					z-index: 10;

					.nav-bar-item {
						flex: 1;
						display: flex;
						height: 100%;
						line-height: 96rpx;
						justify-content: center;
						font-size: 32rpx;
						display: flex;
						margin: 0 120rpx;
					}

					.nav-bar-item-active {
						border-bottom: 5rpx solid;
						font-weight: 700;
					}
				}

				.login-type-form {
					width: 80%;
					margin: 50rpx auto;

					.input-item {
						position: relative;
						height: 90rpx;
						line-height: 90rpx;
						margin-bottom: 46rpx;

						.iconfont {
							font-size: 50rpx;
							position: absolute;
							left: 0;
						}

						.login-type-input {
							height: 90rpx;
							padding-left: 80rpx;
							border-bottom: 1rpx solid rgba(0, 0, 0, .1);
						}

						.sms-code-btn,
						.sms-code-resend {
							width: 240rpx;
							font-size: 26rpx;
						}
					}
				}

				.login-type-tips {
					width: 90%;
					margin: 35px auto;
					padding: 0 20rpx;
					display: flex;
					justify-content: space-between;
					font-size: 28upx;
					color: #666;
				}

				.confirm-btn {
					margin-top: 60upx;
					width: 80%;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}

		.login-type-bottom {
			width: 100%;
			padding-bottom: 30rpx;
			text-align: center;
			font-size: 32rpx;
		}

		// 发送验证码样式
		.input-item-sms-code {
			.input-wrapper {
				display: flex;
				align-items: center; //justify-content: space-between; 
			}

			.sms-code-btn {
				width: 200upx;
				background-color: #fff;
				padding: 15upx 0;
				border-radius: 12upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.sms-code-resend {
				color: #666;
			}
		}
	}
</style>